<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <script>
        // window.onload = function(){
        //     let h1Dom = document.createElement("h1");
        //     h1Dom.innerHTML = "h1内存创建标签";

        //     let pDom = document.getElementById("test");
        //     pDom.replaceWith(h1Dom);
        // }
    </script>
</head>
<body>
    <!-- <hr>
    <p id="test">测试标签</p>
    <hr> -->
    <div id="app">
        <h3>msg：{{ msg }}</h3>
        <input type="text" v-model="msg">
    </div>
    <hr>
    <input type="button" value="手动销毁实例" onclick="destroyVue()">
</body>
<script>
    /*
    - Vue中对部分特殊的属性和功能方法进行特殊指代定义，用于提供独立的执行和获取方式
    - Vue的实例属性和方法以统一规范以 $ 开头
    - 相关实例属性和方法 
        - vm.$el：描述当前Vue实例使用的根 DOM 元素。
        - vm.$data：描述当前Vue实例观察的数据对象。
        - vm.$options：构建当前 Vue 实例的初始化选项。 -> 将内置配置和开发者配置进行整合转换后的配置项
        - vm.$refs：返回一个对象，记录当前Vue实例模板中，定义了ref属性的所有 DOM 元素。

        - vm.$watch：构建一个对Vue实例中数据仓库中变量（data，computed）的监控方法
        - vm.$set：等同于 Vue.set ，手动为实例中没有数据监听的变量添加监视功能
            !!! 只能为data中已经存在的 对象进行新属性添加，不能直接为 data仓库添加新属性
        - vm.$delete：等同于 Vue.delete ，手动为实例中的变量删除监视功能
            !!! 只能为data中已经存在的 对象进行属性删除，不能直接为 data仓库进行操作
        - vm.$forceUpdate()：迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
        
        - vm.$nextTick(function)：等同于 Vue.nextTick(function) ，将执行函数体延迟到页面DOM更新完成后执行
            !!! 通过对数据仓库中的变量修改，触发响应特性，可以完成页面的同步渲染
            !!! 而页面渲染是需要时间的，内存中的仓库中的变量变化完成后，并不代表页面完成渲染操作
            
        - vm.$mount(el)：手动挂载Vue实例
        - vm.$destroy：手动销毁Vue实例 - 解绑vue实例绑定的页面功能（响应式数据，事件绑定……）
                                        不会删除或重新替换页面的元素
    */
    let vm = new Vue({
        // el:"#app",
        data:{
            msg:"测试数据"
        }
    });
    // console.log(vm);
    let appBox = document.getElementById("app");
    console.log(appBox);
    // console.log(vm.$el);

    setTimeout(()=>{
        vm.$mount("#app");
        console.log(appBox);
        console.log(vm.$el);
        console.log(appBox===vm.$el);
        appBox.style.color = "red";
    },3000)

    function destroyVue(){
        vm.$destroy();
    }

</script>
</html>